<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>店铺主页</title>
    <link rel="stylesheet" href="./static/css/global.css">
    <link rel="stylesheet" href="./static/css/index.css">
    <script src="./static/js/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./static/js/css/layui.css" media="all">
    <script src="./static/js/global/jquery-3.2.1.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./static/css/style.min.css">
    <link rel="stylesheet" href="./static/css/productDetails.css">
    <link rel="stylesheet" href="./static/css/storeHome.css">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="static/js/global/swiper-4.2.6.min.css">
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
    
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .swiper-slide img{
            height: 100%;
        }
    </style>
</head>

<body>
    <!-- header -->
    <div class="global-title">
        <div>
            <!-- <span class="title-left">嗨，欢迎来贝链嗨购</span> -->
            <div class="title-left-login">
                <span>嗨，欢迎来贝链嗨购</span>
                <div class="title-left-login-user">
                    <img src="./static/img/img1.png" alt="">
                    <span>这里是用户昵称</span>
                </div>
                <a href="./mine.html">个人中心</a>
                <a href="">收藏夹</a>
                <a href="">退出账户</a>
            </div>
            <div class="title-right">
                <a href="/shopLogin.html">供应商登录</a>
                <a href="./help.html">帮助中心</a>
            </div>
        </div>
    </div>
    <div class="search-header">
        <div>
            <a class="search-header-left" href="">
                <img src="./static/img/header_logo.png" alt="">
            </a>
            <div class="mt-50 mr-10">
                <p class="f-18 f-666 inline-block">威海掌上鲜食品有限公司</p>
                <p class="inline-block ml-10 mr-5">
                    <img src="./static/img/38.png" alt="" class="ver-sub">
                </p>
                <p class="inline-block">
                    <img src="./static/img/39.png" alt="" class="ver-sub">
                </p>
            </div>
            <div class="search-header-right">
                <div class="search-header-right-search">
                    <div>
                        <input type="text" placeholder="搜索商品名称/名称/分类">
                        <div>搜索</div>
                    </div>
                </div>
                <a class="search-header-car" href="">
                    搜本店
                </a>
            </div>
        </div>
    </div>
    <div class="n-banner">
        <img src="" alt="" class="wd100">
    </div>
    <div class="wd100 dao">
        <div class="n-nav wd1200">
            <ul class="inline-block left">
                <li class="nav_li">首页</li>
                <li class="nav_li">所有商品</li>
                <li class="nav_li">鱼类</li>
                <li class="nav_li">虾类</li>
                <li class="nav_li">贝类</li>
                <li class="nav_li">关于我们</li>
            </ul>
            <div class="store_search left inline-block">
                <div class="store_search_left left">
                    <input type="text" placeholder="搜索商品名称/名称/分类">
                </div>
                <div class="store_search_right left">
                    <span class="f-16 f-fff">店内搜索</span>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <script>
        $(function () {
            $(".n-nav .nav_li").eq(0).addClass("curr");
            $(".n-nav .nav_li").click(function () {
                $(this).siblings().removeClass("curr");
                $(this).addClass("curr");
            });
        });
    </script>
    <!-- header -->

    <div class="storeHome">
        <header>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="static/img/store_home_p3.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="static/img/store_home_p2.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="static/img/store_home_p3.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="static/img/store_home_p1.png" alt="">
                    </div>
                </div>
            </div>
        </header>
        <nav>
            <div class="header">
                <img src="static/img/store_home_nav_logo.png" alt="">
            </div>
            <div class="main">
                <!-- 推荐 -->
                <div class="recommend">
                    <div class="body">
                        <div>
                            <img src="./static/img/commodity1.png" alt="">
                            <div>
                                <p>冷淡南极银鳕鱼</p>
                                <span>青岛远洋渔业</span>
                                <div>
                                    ¥49.90
                                    <span>/斤</span>
                                    <p>销量：1000</p>
                                </div>
                                <section class="stocks">
                                    现货
                                </section>
                            </div>
                        </div>
                        <div>
                            <img src="./static/img/commodity2.png" alt="">
                            <div>
                                <p>冷淡南极银鳕鱼</p>
                                <span>青岛远洋渔业</span>
                                <div>
                                    ¥49.90
                                    <span>/斤</span>
                                    <p>销量：1000</p>
                                </div>
                                <section class="presell">
                                    预售
                                </section>
                            </div>
                        </div>
                        <div>
                            <img src="./static/img/commodity3.png" alt="">
                            <div>
                                <p>冷淡南极银鳕鱼</p>
                                <span>青岛远洋渔业</span>
                                <div>
                                    ¥49.90
                                    <span>/斤</span>
                                    <p>销量：1000</p>
                                </div>
                                <section class="presell">
                                    预售
                                </section>
                            </div>
                        </div>
                        <div>
                            <img src="./static/img/commodity4.png" alt="">
                            <div>
                                <p>冷淡南极银鳕鱼</p>
                                <span>青岛远洋渔业</span>
                                <div>
                                    ¥49.90
                                    <span>/斤</span>
                                    <p>销量：1000</p>
                                </div>
                                <section class="presell">
                                    预售
                                </section>
                            </div>
                        </div>
                        <div>
                            <img src="./static/img/commodity1.png" alt="">
                            <div>
                                <p>冷淡南极银鳕鱼</p>
                                <span>青岛远洋渔业</span>
                                <div>
                                    ¥49.90
                                    <span>/斤</span>
                                    <p>销量：1000</p>
                                </div>
                                <section class="presell">
                                    预售
                                </section>
                            </div>
                        </div>
                        <div>
                            <img src="./static/img/commodity2.png" alt="">
                            <div>
                                <p>冷淡南极银鳕鱼</p>
                                <span>青岛远洋渔业</span>
                                <div>
                                    ¥49.90
                                    <span>/斤</span>
                                    <p>销量：1000</p>
                                </div>
                                <section class="presell">
                                    预售
                                </section>
                            </div>
                        </div>
                        <div>
                            <img src="./static/img/commodity3.png" alt="">
                            <div>
                                <p>冷淡南极银鳕鱼</p>
                                <span>青岛远洋渔业</span>
                                <div>
                                    ¥49.90
                                    <span>/斤</span>
                                    <p>销量：1000</p>
                                </div>
                                <section class="presell">
                                    预售
                                </section>
                            </div>
                        </div>
                        <div>
                            <img src="./static/img/commodity4.png" alt="">
                            <div>
                                <p>冷淡南极银鳕鱼</p>
                                <span>青岛远洋渔业</span>
                                <div>
                                    ¥49.90
                                    <span>/斤</span>
                                    <p>销量：1000</p>
                                </div>
                                <section class="presell">
                                    预售
                                </section>
                            </div>
                        </div>
                    </div>      
                </div>
            </div>
        </nav>
        <main>
            <div>
                <img src="static/img/store_home_p3.png" alt="">
            </div>
            <div>
                <img src="static/img/store_home_p2.png" alt="">
            </div>
        </main>

    </div>
    
    <!-- footer -->
    <div class="global-footer">
        <div class="global-footer-header">
            <div>
                <img class="footer1" src="./static/img/footer1.png" alt="">
                <div>
                    <p>供应链直采</p>
                    <p>限定产源 质量保证</p>
                </div>
            </div>
            <div>
                <img class="footer2" src="./static/img/footer2.png" alt="">
                <div>
                    <p>海外全品类</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
            <div>
                <img class="footer3" src="./static/img/footer3.png" alt="">
                <div>
                    <p>区块链溯源</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
            <div>
                <img class="footer4" src="./static/img/footer4.png" alt="">
                <div>
                    <p>全过程冷链</p>
                    <p>实时物流 安全可控</p>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 1px;background-color: #ffffff;opacity: 0.38;"></div>
        <div class="global-footer-cont">
            <div>
                <a href="./index.html" class="global-footer-cont-logo">
                    <img src="./static/img/footer_logo.png" alt="">
                </a>
                <a href="" class="global-footer-cont-menu">关于我们</a>
                <a href="" class="global-footer-cont-menu">产品中心</a>
                <a href="" class="global-footer-cont-menu">服务介绍</a>
                <a href="./help.html" class="global-footer-cont-menu">购物指南</a>
                <a href="./help.html" class="global-footer-cont-menu">帮助中心</a>
            </div>
            <div>
                <img src="./static/img/footer_code.png" alt="">
                <p>扫描关注</p>
                <p>贝链嗨购官方微信</p>
            </div>
        </div>
        <div class="global-footer-explain">鲁ICP备 18098987号 copyright @2018 beilianhaigou.com.ALL Rights Reserved.</div>
    </div>
    <!-- footer -->
    <div class="global-service">
        <div>
            <a href="">
                <img src="./static/img/service_car.png" alt="">
            </a>
            <a href="">
                <img src="./static/img/service_service.png" alt="">
            </a>
            <a href="">
                <img src="./static/img/service_time.png" alt="">
            </a>
        </div>
        <div class="global-top" style="display:none">
            <img src="./static/img/top.png" alt="">
        </div>
    </div>
</html>
<!-- Swiper JS -->
<script src="static/js/global/swiper-4.2.6.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});
</script>